> ## Documentation Index
> Fetch the complete documentation index at: https://sequence-0fb8d9e6-api_docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Connectors in Web SDK

> Learn how to create and integrate custom connectors with Web SDK. Follow step-by-step instructions to build your own connector using existing templates.

Web SDK provides official connectors via the [@0xsequence/connect-connectors](https://github.com/0xsequence/web-sdk/tree/master/packages/connect/src/connectors) package. However, you can also integrate custom connectors with Web SDK to support additional wallets. This guide will walk you through creating and using custom connectors.

## Creating a Custom Connector

To create a custom connector, you can use an existing connector as a basis. For example, the [Metamask Connector](https://github.com/0xsequence/web-sdk/tree/master/packages/connect/src/connectors/metaMask) is a good starting point. Here's an example of how to create a custom connector:

```tsx theme={null}
export const myCustomConnector = (options: MyCustomConnectorOptions) => ({
  id: 'my-custom-connector',
  name: 'My Custom Connector',
  logoDark: MyCustomLogoDark,
  logoLight: MyCustomLogoLight,
  createConnector: () => {
    const connector = myCustomConnector(options);
    return connector;
  },
});
```

Make sure to provide a unique `id` for your connector to avoid conflicts with other connectors. You can also customize fields such as `name`, `logoDark`, and `logoLight` to control how the connector appears in Web SDK.

The `createConnector` function from wagmi should return an initialized connector. Web SDK connectors are wrappers of Wagmi connectors, so you can use an official Wagmi connector if available, or create your own if needed.

For more details on creating custom connectors, refer to [Wagmi's guide on Custom Connectors](https://wagmi.sh/examples/custom-connector).

# Using Custom Connectors

When using custom connectors, you can't rely on the `getDefaultConnectors` utility function. Instead, you need to pass custom configurations to Web SDK.

First, create a list of connectors, including your custom connector, and provide it to the Wagmi configuration:

```tsx theme={null}
import { getConnectWallets } from '@0xsequence/connect';
import { createConfig } from 'wagmi';

const projectAccessKey = '<your-project-access-key>';

const connectors = getConnectWallets(projectAccessKey, [
  google({
    defaultNetwork: 137,
    connect: {
      app: 'my-app',
      projectAccessKey: '<access-key>'
    }
  }),
  // ... other connectors
  myCustomConnector({ appName: 'my-app' }),
]);

const config = createConfig({
  transports,
  connectors,
  chains
})
```

Next, use your custom connector by specifying its `id` in either the `socialAuthOptions` or `walletAuthOptions` field of the Web SDK configuration:

```tsx theme={null}
const kitConfig = {
  signIn: {
    socialAuthOptions: ['google', 'facebook'],
    walletAuthOptions: ['metamask', 'my-custom-connector'],
  }
};

return (
  <WagmiProvider config={wagmiConfig}>
    <QueryClientProvider client={queryClient}>
      <SequenceConnect config={connectConfig}>
        <App />
      </SequenceConnect>
    </QueryClientProvider>
  </WagmiProvider>
);
```

# Share Your Custom Connectors

Feel free to contribute your custom connectors by creating a [pull request](https://github.com/0xsequence/web-sdk/pulls). This way, others can benefit from your work and enjoy seamless integration with Sequence Web SDK's.

Share the love ❤️ by expanding the ecosystem of custom connectors!